<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>底部导航菜单切换</title>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<style>
			/* select{ margin: 0px !important; padding:4px !important;}
			.text-left{ width:50%; float:left;}
			.mui-table-view{font-size:14px;}
			.ui-alert{ width: 50%; line-height:32px; margin-left:3px;} */
			.text-right{padding-right:1rem; line-height:25px;}
			.text-right span{ padding-right:10px;}
			.mui-table-view{font-size: 14px;}
			input{border-width:0; text-align: right; font-size:14px;}
			.bottom_soild{border-bottom: 1px solid #DDDDDD}
			/*列表样式*/
			.pat_class{ float:left;}
			.pat_class img{ float: left; width: 25%;}
			.mui-media-body{ float: left; width: 70%; margin-left:5%;}
			.mui-media-body-l{ float: left; width: 100%;}
			.mui-media-body-l span{ float: left; margin-right: 10px;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">随访查询</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<div style="float: left; width: 100%;">
						<span>随访分类</span>
						<select style=" width:40%; padding:4px; margin: 0;" id="sel-id">
							<option value="">请选择</option>
							<option value="1">高血压随访</option>
							<option value="2">糖尿病随访</option>
							<option value="3">肺结核随访</option>
						</select>
						<button style="float: right;" onclick="search()">高级搜索</button>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<a data-options='{"type":"date"}' class="btn mui-navigate-right">
						<div style="float: left; line-height: 30px; color: #000000;">开始时间</div>
						<input id='result0' class="ui-alert" placeholder="请选择" style="width:50%; height: 32px;  border-radius:5px; margin-left:5px; font-size: 15px; line-height: 32px; float:right; margin-right:15px;" />
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a data-options='{"type":"date"}' class="btn mui-navigate-right">
						<div style="float: left; line-height: 30px; color: #000000;">结束时间</div>
						<input id='result1' class="ui-alert" placeholder="请选择" style="width:50%; height: 32px;  border-radius:5px; margin-left:5px; font-size: 15px; line-height: 32px; float:right; margin-right:15px;" />
					</a>
				</li>
			</ul>
			<div style="height:10px; background:#efeff4;"></div>
			<ul class="mui-table-view" id="follow_qy_ul">

			</ul>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.min.js"></script>
		<script src="../js/jquery.min-1.11.1.js"></script>
		<script src="../js/request.js"></script>
		<script type="text/javascript" charset="utf-8">
			var listdata = "";
			var rows ="";
			//查询后事件添加
			function fun_append(){
				$("#follow_qy_ul").html("");
				var listcont ="";
				$.ajax({
						type: 'post',
						url:getRequestUrl.url+"/mobile/IntegratedQuery/getVisitRecord",
						data:{
							queryType:opt.val(),
							beginDate:beginDate,
							endDate:endDate
						},
						dataType:"json",
						type:'post',//HTTP请求类型
						timeout:10000,//超时时间设置为10秒；
						success : function(data) {
							rows = data["rows"]
							console.log(data["rows"])
							if(data.status==1){
								//,'+data["rows"][i]+','+data["rows"][i]+'
								for(var i=0; i<data["rows"].length; i++){
											var date0 = new Date(data["rows"][i].birthday)
											var date1 = new Date();
											var year0 = date0.getFullYear();
											var year1 = date1.getFullYear();
											var age = year1 - year0;
											var vistdata = new Date(data["rows"][i].visitDate)
											var visi = vistdata.getFullYear()+'-'+ (vistdata.getMonth()+1) +'-'+vistdata.getDate();
											var arry = ['门诊','家庭','电话']
											var arry_way = arry[data["rows"][i].visitWay]
											listcont += '<li class="mui-table-view-cell mui-media">'
											+'<a class="pat_class" onclick="openurl('+data["rows"][i].visitWay+','+data["rows"][i].visitId+','+i+')">'
											+'<img id="Pat_img'+i+'" class="mui-pull-left" src="../images/Patient-m.png">'
											+'<div class="mui-media-body">'
											+'<div class="mui-media-body-l"><span>'+data["rows"][i].name+'</span><span>性别:'+data["rows"][i].sex+'</span><span>年龄:'+age+'</span></div>'
											+'<div class="mui-media-body-l"><span class="mui-ellipsis">随访医生:'+data["rows"][i].doctorName+'</span></div>'
											+'<div class="mui-media-body-l"><span class="mui-ellipsis">随访方式:</span>'+arry_way+'</div>'
											+'<div class="mui-media-body-l"><span class="mui-ellipsis">随访日期:'+visi+'</span></div>'
											+'</div>'
											+'</a>'
											+'</li>';	
								}
							}else{
								alert(data.message);
							}
							$("#follow_qy_ul").append(listcont)
							for(var j=0; j<data["rows"].length; j++){
								console.log(j)
								//头像性别
								if(data["rows"][j].sex == "女"){
									$("#Pat_img"+j).attr("src", "../images/Patient-w.png");
								}else{
									$("#Pat_img"+j).attr("src", "../images/Patient-m.png");
								}
							}
						},
						error:function(xhr,type,errorThrown){
							
						}
					})	
			}
			//选项
			var opt = $("#sel-id option:selected");
			$("#sel-id").change(function(val) {
				opt = $("#sel-id option:selected");
			});

			function search() {
					mui.openWindow({
						url: 'search.html', 
						id:'search',
						extras:{
							name:'search'
						}
					});
			}
			//跳转
			function openurl(symname,visitId,i){
				var arry =["高血压专档","糖尿病专档","肺结核专档"]
				console.log(arry[opt.val()-1],visitId,JSON.stringify(rows[i]))
				mui.openWindow({
					url: 'follow_up_add.html', 
					id:'follow_up_add',
					extras:{
						symname:arry[opt.val()-1],
						data:JSON.stringify(rows[i]),
						visitId:visitId
					}
				});
			}
			//其他
			(function($) {
				$.init();
				var result = $('#result')[0];
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var _self = this;
						if (_self.picker) {
							_self.picker.show(function(rs) {
								result.innerText = rs.text;
								_self.picker.dispose();
								_self.picker = null;
							});
						} else {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');
							/*
							 * 首次显示时实例化组件
							 * 示例为了简洁，将 options 放在了按钮的 dom 上
							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
							 */
							_self.picker = new $.DtPicker(options);
							_self.picker.show(function(rs) {
								/*
								 * rs.value 拼合后的 value
								 * rs.text 拼合后的 text
								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
								 * rs.m 月，用法同年
								 * rs.d 日，用法同年
								 * rs.h 时，用法同年
								 * rs.i 分（minutes 的第二个字母），用法同年
								 */
								$('#result' + i)[0].value = rs.text;
								/* 
								 * 返回 false 可以阻止选择框的关闭
								 * return false;
								 */
								//判断开始时间和结束时间
								if ($('#result0')[0].value > $('#result1')[0].value && $('#result1')[0].value != "") {
									alert("结束时间必须大于之前")
									$('#result' + i)[0].value = ""
								}
								//请求条件
								if( $('#result1')[0].value != "" && $('#result0')[0].value != "" && opt.val() != ""){
									
									beginDate = $('#result0')[0].value
									endDate = $('#result1')[0].value
									fun_append()
								}
								//判断分类
								if(opt.val() == "" && $('#result1')[0].value != ""){
									$('#result' + i)[0].value = ""
									alert("分类不能为空")
									
								}
								/*
								 * 释放组件资源，释放后将将不能再操作组件
								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
								 */
								_self.picker.dispose();
								_self.picker = null;

							});
						}

					}, false);
				});
			})(mui);
			
		</script>
	</body>
</html>
